// Theme Enhancements for LinkVerify
@import './variables.scss';

// Glassmorphism utilities
@mixin glassmorphism {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

@mixin glassmorphism-dark {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

// Loading animations
.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  
  .el-loading-spinner {
    .circular {
      animation: rotate 2s linear infinite;
      
      .path {
        stroke: $primary-color;
        stroke-linecap: round;
        animation: dash 1.5s ease-in-out infinite;
      }
    }
  }
}

// Message notifications
.el-message {
  border-radius: 10px;
  padding: 12px 20px;
  box-shadow: $box-shadow-light;
  border: none;
  
  &--success {
    background: linear-gradient(135deg, $success-light 0%, #fff 100%);
    color: $success-color;
    
    .el-message__icon {
      color: $success-color;
    }
  }
  
  &--warning {
    background: linear-gradient(135deg, $warning-light 0%, #fff 100%);
    color: $warning-color;
    
    .el-message__icon {
      color: $warning-color;
    }
  }
  
  &--error {
    background: linear-gradient(135deg, $danger-light 0%, #fff 100%);
    color: $danger-color;
    
    .el-message__icon {
      color: $danger-color;
    }
  }
  
  &--info {
    background: linear-gradient(135deg, $info-light 0%, #fff 100%);
    color: $info-color;
    
    .el-message__icon {
      color: $info-color;
    }
  }
}

// Dialog enhancements with glassmorphism
.el-dialog {
  @include glassmorphism;
  border-radius: 20px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  overflow: hidden;
  
  .el-dialog__header {
    background: linear-gradient(135deg, $primary-lighter 0%, #fff 100%);
    padding: 20px 24px;
    border-bottom: 1px solid $border-lighter;
    
    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
      color: $text-primary;
    }
  }
  
  .el-dialog__body {
    padding: 24px;
  }
  
  .el-dialog__footer {
    padding: 16px 24px;
    background: $border-extra-light;
    border-top: 1px solid $border-lighter;
  }
}

// Select dropdown enhancement
.el-select-dropdown {
  border-radius: 10px;
  border: 1px solid $border-light;
  box-shadow: $box-shadow-light;
  
  .el-select-dropdown__item {
    padding: 12px 20px;
    font-weight: 500;
    transition: all 0.3s ease;
    
    &:hover {
      background: $primary-lighter;
      color: $primary-color;
    }
    
    &.selected {
      color: $primary-color;
      font-weight: 600;
      background: $primary-lighter;
    }
  }
}

// Table enhancements
.el-table {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: $box-shadow-card;
  
  th {
    background: linear-gradient(180deg, $border-extra-light 0%, #fff 100%);
    font-weight: 600;
    color: $text-primary;
    border-bottom: 2px solid $border-light;
  }
  
  td {
    border-bottom: 1px solid $border-lighter;
  }
  
  .el-table__row {
    transition: all 0.3s ease;
    
    &:hover {
      background: $primary-lighter;
      
      td {
        background: transparent;
      }
    }
  }
  
  .el-table__empty-block {
    padding: 48px 0;
    
    .el-table__empty-text {
      color: $text-secondary;
      font-size: 16px;
    }
  }
}

// Form enhancements
.el-form {
  .el-form-item__label {
    font-weight: 600;
    color: $text-primary;
    margin-bottom: 8px;
  }
  
  .el-input__inner,
  .el-textarea__inner {
    border-radius: 8px;
    border-color: $border-light;
    padding: 10px 15px;
    font-size: $font-size-base;
    transition: all 0.3s ease;
    
    &:hover {
      border-color: $primary-light;
    }
    
    &:focus {
      border-color: $primary-color;
      box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
    }
  }
  
  .el-textarea__inner {
    font-family: inherit;
    line-height: 1.6;
  }
}

// Switch enhancement - Fixed styles
.el-switch {
  &.is-checked .el-switch__core {
    background: linear-gradient(135deg, $primary-color, $primary-dark);
    border-color: $primary-dark;
  }
  
  .el-switch__core {
    min-width: 40px;
    height: 20px;
    border-radius: 10px;
    border: 2px solid #dcdfe6;
    background-color: #dcdfe6;
    position: relative;
    cursor: pointer;
    transition: all 0.3s;
    
    .el-switch__button {
      position: absolute;
      top: 1px;
      left: 1px;
      border-radius: 50%;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      width: 16px;
      height: 16px;
      background-color: #fff;
    }
  }
  
  &.is-checked {
    .el-switch__core {
      border-color: $primary-color;
      background-color: $primary-color;
      
      .el-switch__button {
        left: 100%;
        margin-left: -17px;
      }
    }
  }
}

// Radio and Checkbox enhancements
.el-radio {
  &__input.is-checked {
    .el-radio__inner {
      border-color: $primary-color;
      background: $primary-color;
      
      &::after {
        background: white;
      }
    }
    
    + .el-radio__label {
      color: $primary-color;
      font-weight: 500;
    }
  }
}

.el-checkbox {
  &__input.is-checked {
    .el-checkbox__inner {
      background-color: $primary-color;
      border-color: $primary-color;
    }
    
    + .el-checkbox__label {
      color: $primary-color;
      font-weight: 500;
    }
  }
  
  &__inner {
    border-radius: 6px;
    transition: all 0.3s ease;
  }
}

// Dropdown enhancements
.el-dropdown-menu {
  border-radius: 10px;
  border: 1px solid $border-light;
  box-shadow: $box-shadow-light;
  padding: 8px;
  
  .el-dropdown-menu__item {
    border-radius: 6px;
    padding: 10px 16px;
    font-weight: 500;
    transition: all 0.3s ease;
    margin: 2px 0;
    
    &:hover {
      background: $primary-lighter;
      color: $primary-color;
    }
    
    i {
      margin-right: 8px;
      font-size: 16px;
    }
  }
}

// Tooltip enhancements
.el-tooltip__popper {
  border-radius: 8px;
  padding: 10px 14px;
  font-size: $font-size-small;
  box-shadow: $box-shadow-light;
  
  &[x-placement^="top"] .popper__arrow {
    border-top-color: rgba(0, 0, 0, 0.8);
  }
  
  &[x-placement^="bottom"] .popper__arrow {
    border-bottom-color: rgba(0, 0, 0, 0.8);
  }
  
  &[x-placement^="left"] .popper__arrow {
    border-left-color: rgba(0, 0, 0, 0.8);
  }
  
  &[x-placement^="right"] .popper__arrow {
    border-right-color: rgba(0, 0, 0, 0.8);
  }
}

// Badge enhancements
.el-badge__content {
  border-radius: 10px;
  padding: 0 6px;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

// Progress bar enhancements
.el-progress-bar__inner {
  background: linear-gradient(90deg, $primary-color, $primary-dark);
  border-radius: 100px;
  position: relative;
  overflow: hidden;
  
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

// Notification enhancements with glassmorphism
.el-notification {
  @include glassmorphism;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
  
  &.el-notification--success {
    background: linear-gradient(135deg, $success-light 0%, #fff 100%);
    
    .el-notification__icon {
      color: $success-color;
    }
  }
  
  &.el-notification--warning {
    background: linear-gradient(135deg, $warning-light 0%, #fff 100%);
    
    .el-notification__icon {
      color: $warning-color;
    }
  }
  
  &.el-notification--error {
    background: linear-gradient(135deg, $danger-light 0%, #fff 100%);
    
    .el-notification__icon {
      color: $danger-color;
    }
  }
  
  &.el-notification--info {
    background: linear-gradient(135deg, $info-light 0%, #fff 100%);
    
    .el-notification__icon {
      color: $info-color;
    }
  }
}

// Autocomplete enhancements
.el-autocomplete-suggestion {
  border-radius: 10px;
  box-shadow: $box-shadow-light;
  border: 1px solid $border-light;
  
  li {
    padding: 12px 16px;
    font-weight: 500;
    transition: all 0.3s ease;
    
    &:hover {
      background: $primary-lighter;
      color: $primary-color;
    }
    
    &.highlighted {
      background: $primary-lighter;
      color: $primary-color;
      font-weight: 600;
    }
  }
}

// Custom animations
@keyframes slideInUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadeInScale {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

// Apply animations to components
.module-container {
  animation: fadeInScale 0.4s ease;
}

.el-card {
  animation: slideInUp 0.5s ease;
  animation-fill-mode: both;
  
  @for $i from 1 through 10 {
    &:nth-child(#{$i}) {
      animation-delay: #{$i * 0.05}s;
    }
  }
}